import React, { useRef } from "react";
import { List, Footer, Space, NavBar, Dialog, Mask, Modal } from "antd-mobile";
import { CloseOutline, RightOutline } from "antd-mobile-icons";
import util from "./common/Util";
import constant from "./common/Constants";
import { useNavigate } from "react-router-dom";
/**
 * 菜单选择页面
 */
function MenuList() {
  const navigate = useNavigate();
  const containerRef = useRef();
  const handleClick = (path) => {
    if (path) {
      navigate(path);
    }
  };
  const logout = () => {
    Dialog.confirm({
      content: "是否退出登录",
      getContainer: () => {
        console.info(containerRef);
        return containerRef.current;
      },
      onConfirm: () => {
        var token = util.getToken();
        var url = constant.baseUrl + "/app/logout";
        util.postForm(url, { token }, (resultObj) => {
          console.info(resultObj);
          if (resultObj.code === 0 || resultObj.code === 50002) {
            localStorage.removeItem("token");
            navigate("/login");
          }
        });
      },
    });
  };

  const right = (
    <div className="logout">
      <Space style={{ "--gap": "16px" }} onClick={logout}>
        <CloseOutline />
      </Space>
    </div>
  );
  const ret = (
    <div className="container" ref={containerRef}>
      <NavBar backArrow={false} right={right}>
        AiLab能力展示
      </NavBar>
      <List mode="card" header="" className="index-list">
        <List.Item
          onClick={handleClick.bind(this, "/speechSynth")}
          extra="自研"
        >
          语音合成
        </List.Item>
        <List.Item onClick={handleClick.bind(this, "/cbChat")} extra="自研">
          文本对话
        </List.Item>
        <List.Item
          onClick={handleClick.bind(this, "/zpChat")}
          extra="智谱(characterglm)"
        >
          智谱对话
        </List.Item>
        
        <List.Item
          onClick={handleClick.bind(this, "/mxT2A")}
          extra="minimax语音合成"
        >
          米麦语音合成
        </List.Item>

        <List.Item
          onClick={handleClick.bind(this, "/mxChat")}
          extra="minimax(abab5.5模型)"
        >
          米麦对话
        </List.Item>

       

        {util.isDev() && (
          <List.Item onClick={handleClick.bind(this, "/test")}>
            实验室
          </List.Item>
        )}
      </List>
      <Footer content="@ 2020-2023 a2o.com All rights reserved"></Footer>
    </div>
  );
  return ret;
}

export default MenuList;
